<template>
    <el-tabs v-model="activeName">
        <el-tab-pane name="first" label="新增广告">
    <el-form :model="addAdArr" :rules="rules" ref="addAdArr" label-width="100px" class="demo-addAdArr">
        <el-form-item label="广告名称" prop="ad_name">
            <el-input v-model="addAdArr.adName" @blur="getGoodsId"></el-input>
        </el-form-item>
        <!--开始日期和结束日期-->
        <el-form-item label="活动日期">
            <el-col :span="11">
                <el-form-item prop="adCreateTime">
                    <el-date-picker type="date" placeholder="选择开始日期" v-model="addAdArr.ad_create_time" style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-col>
            <!--结束日期-->
            <el-col :span="11">
                <el-form-item prop="adUpdateTime">
                    <el-date-picker type="date" placeholder="选择结束日期" v-model="addAdArr.ad_update_time" style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-col>
        </el-form-item>

        <el-form-item label="广告url" prop="adUrl">
            <el-input v-model="addAdArr.adUrl" disabled></el-input>
        </el-form-item>
        <el-form-item label="广告图片" prop="file" multiple="false" v-model="addAdArr.file">
            <el-upload
                    ref="pictureUpload"
                    :file-list="fileList"
                    :on-change="handleChange"
                    :limit="1"
                    action="#"
                    list-type="picture-card"
                    :http-request="uploadFile"
                    :auto-upload="false">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                    <img
                            class="el-upload-list__item-thumbnail"
                            :src="addAdArr.file=file.url" alt=""
                    >
                    <span class="el-upload-list__item-actions">
        <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
                </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="addAdArr.file" alt="">
            </el-dialog>
        </el-form-item>
        <el-form-item label="是否显示" prop="resource">
            <el-radio-group v-model="addAdArr.adStatus">
                <el-radio v-model="addAdArr.adStatus" label="0">开启</el-radio>
                <el-radio v-model="addAdArr.adStatus" label="1">关闭</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('addAdArr')">立即创建</el-button>
            <el-button @click="resetForm('addAdArr')">重置</el-button>
        </el-form-item>
    </el-form>
  </el-tab-pane>
</el-tabs>
</template>

<script>
    export default {
        name:'addAdvertisement',
        data() {
            return {
                addAdArr: {
                    adName:'',//广告名称
                    adUrl:'',//广告链接
                    file:'',//广告图片
                    adStatus:'1',//广告显示状态
                    ad_is_deleted:'',//是否删除
                    ad_sort:'',//广告排序
                    ad_create_time:'',//创建时间
                    ad_update_time:''
                },
                fileList:[],
                rules:{
                    adName: [
                        { required: true, message: '请输入广告名称', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    ad_create_time: [
                        { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }
                    ],
                    ad_update_time: [
                        { type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }
                    ],
                    ad_sort:[{
                        required: true, message: '请填写广告排序', trigger: 'blur'}],
                    adStatus: [
                        { required: true, message: '请选择是否开启广告', trigger: 'change' }
                    ],
                    adUrl: [
                        { required: true, message: '请填写广告链接', trigger: 'blur' }
                    ]
                },
                dialogVisible: false,
                disabled: false,
                file:'',
                activeName: 'first'//tabs默认选择first
            };
        },
        methods: {
            uploadFile(file){
                console.log(file)
                this.formData.append('file',file.file);
            },
            handleChange(file, fileList) {
                this.fileList = fileList;
            },
            //创建submit提交请求创建
            submitForm(addAdArr) {
                //构造formData
            let formData = new FormData()
                console.log(this.fileList)
                formData.append('file',this.fileList[0].raw)




                this.$refs[addAdArr].validate((valid) => {
                    if (valid) {
                        this.$axios({method:'post',url:'/api/ad/add', params:{adName:this.addAdArr.adName,adUrl:this.addAdArr.adUrl,adStatus:this.addAdArr.adStatus},
                        data:formData
                        }).then((res)=>{
                            console.log(res)
                            this.$router.push({name:'advertisement'})
                        }).catch((err)=>{
                            console.log(err)
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //重置按钮
            resetForm(addAdArr) {
                this.$refs.addAdArr.resetFields()
            },
                //删除图标的方法
                handleRemove(file) {
                    this.$refs.pictureUpload.uploadFiles = []
                },
                //预览
                handlePictureCardPreview(file) {
                    this.addAdArr.file = file.url;
                    this.dialogVisible = true;
                },
            //下载方法
                handleDownload(file) {
                    console.log(file);
                },
            getGoodsId(){
                this.$axios.post('/api/goods/list',{goodsName:this.addAdArr.adName,
                    goodsType:null,
                    goodsUuid:null,}).then((res) => {
                    console.log(res.data.data)
                    if (res.data.data.length==1){
                        this.addAdArr.adUrl=res.data.data[0].goodsId
                    }
                })
            }
            },
    }
</script>

<style scoped>
    .el-form{
        width: 40%;
        overflow: hidden;
        padding-left: 20px;
    }
    .el-form-item{
        text-align: left;
    }
</style>